import React, { useState, useEffect } from 'react';
import { queryByUpdate } from '../../services/login';
import { Steps, Popover, Form, Button, message } from 'antd';
import { history } from 'umi';
import BasicDetails from './components/BasicDetails';
import SecondDetails from './components/SecondDetails';

import {} from '@ant-design/icons';
import './index.less';
import { set } from '@umijs/deps/compiled/lodash';
export default function activityDetails(props) {
  // *------------------------------------------------------------
  // todo 这是标题样式
  const [informationFlag, setInformationFlag] = useState(true);
  // todo 这是标题的控制显示
  const informationClick = (flag) => {
    setInformationFlag(flag);
  };

  // *------------------------------------------------------------
  // todo 拿数据的接口
  const [activityList, setActivityList] = useState({});
  useEffect(async () => {
    const activityList = await queryByUpdate({
      activityBasicId: props.location.state.activityBasicId,
    });
    if (activityList.code == 200) {
      setActivityList(activityList.data);
    } else {
      message.error('详情获取失败，请刷新重试');
    }
  }, [props.location.query.id]);

  // todo 这是返回按钮
  const backToTheOldTime = () => {
    history.push({
      pathname: `/`,
    });
  };

  // *------------------------------------------------------------
  return (
    <div>
      {/* 大盒子不要管 */}
      <div className="activityDetails">
        {/* 中间标题 */}
        <div className="activityDetailsTitle">
          <p>创建活动 /</p> <p>详情</p>
        </div>
        {/* 中间标题  结束*/}
        {/* 内容 */}
        <div className="activityDetailsContent">
          {/* 详情盒子 */}
          <div className="activityDetailsContentTitle">详情</div>
          {/* 切换标题 */}
          <div className="activityDetailsContentSwitch">
            <div
              className={informationFlag ? 'selectedInformation' : 'information'}
              onClick={() => {
                informationClick(true);
              }}
            >
              基本信息<div className="underscore"></div>
            </div>
            <div
              className={informationFlag ? 'information' : 'selectedInformation'}
              onClick={() => {
                informationClick(false);
              }}
            >
              活动信息<div className="underscore"></div>
            </div>
          </div>
          {/* 切换标题 结束*/}
          <div className="bigBoxOfInformation">
            {/* 基本信息 */}
            <div style={{ display: informationFlag ? 'block' : 'none' }}>
              <BasicDetails activityList={activityList} />
            </div>
            {/* 基本信息 结束*/}
            {/* 活动信息 */}
            <div style={{ display: informationFlag ? 'none' : 'block' }}>
              <SecondDetails activityList={activityList} />
            </div>
            {/* 活动信息 结束*/}
          </div>
        </div>
        {/* 内容 结束*/}
        {/* 返回按钮 */}
        <div className="backButtonBox">
          <div className="backButton" onClick={backToTheOldTime}>
            返回
          </div>
        </div>
        {/* 返回按钮 结束*/}
      </div>
      {/* 大盒子 结束 */}
    </div>
  );
}
